<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../public/node_modules/element/element.css">
		<link rel="stylesheet" href="../public/node_modules/element/icon.css">
		<link rel="stylesheet" href="../public/css/public-pc.css">
		<link rel="stylesheet" href="../public/css/style-wap.css">
		<link rel="stylesheet" href="../public/css/public-wap.css">
		<link rel="stylesheet" href="../public/css/style-pc.css">
		<link rel="stylesheet" href="../public/css/animate.min.css">
		<script src="../public/js/jquery.js"></script>
		<script src="../public/js/jquery.scrollAnimations.min.js"></script>
		<script src="../public/js/popper.min.js"></script>
		
		
		
		
		
		
		<style>
			.service-content-box>.el-carousel {
				/* max-width: 100%; /* 限制轮播最大宽度 */
				*/ margin: 0 auto;
				/* 居中显示 */
				width: 100% !important;
				height: 30vw !important;
			}

			.el-carousel__item--card {
				width: 50%;
				margin: 0vw;

			}


			.pageContent .el-carousel__container {
				width: 100% !important;
				/* 强制容器宽度 */
			}


			.pageContent .el-carousel__item {

				width: 100%;
				margin: 0 10%;
				transform: scale(0.9);
				transition: transform 0.3s;
				margin: 0vw 50vw;
				border-radius: 0.52vw !important;
				overflow: hidden;

			}

			.pageContent .el-carousel__item.is-active {
				transform: scale(1);
				/* 当前活动卡片放大 */

			}

			.carousel-img {
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: 0.52vw !important;
			}

			.carousel-text {
				width: 90%;
				height: 15%;
				position: absolute;
				bottom: 4%;
				left: 6%;
				border-radius: 0.52vw;
				background-color: #fff;
				color: var(--color-text-3);
				font-size: var(--text-14);
				z-index: 100;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 2%;
				box-sizing: border-box;
				text-indent: 2em;
			}
		
		</style>
	</head>
	<body>
		<div id="app">
			<div class="show-pc">
				<div class="about-head">
					<img src="../public/img/用户服务banner.png" scale-animate="1" alt="" class="about-head-img" />
					<!-- banner内容 -->
					<div class="about-head-text" data-animation="fadeInDown">
						<div class="banner-head-title">用户服务</div>
						<div class="banner-head-text">USER SERVICES</div>
					</div>
					<div class="banner-sel" data-animation="bounceInLeft">
						<div class="pageContent sel-box">
							<div class="sel-item">
								<a href="">
									<div class="sel-item-text active">
										临床支持
									</div>
								</a>
								<a href="/psk-web-html/service/AfterSales.html">
									<div class="sel-item-text ">
										专业售后
									</div>
								</a>
							</div>
							<div class="sel-item-right">
								<div class="home-img-box">
									<img src="../public/img/首页home.png" alt="" class="home-img" />
								</div>
								<div class="home-box-text">
									<a href="/psk-web-html/index/index.html">首页</a>
								</div>
								<div class="home-box-text">></div>
								<div class="home-box-text">用户服务</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="show-wap">
				<div class="about-head-wap">
					<img src="../public/img/用户服务banner.png" scale-animate="1" alt="" class="about-head-img" />
					<div class="about-head-text" data-animation="fadeInDown">
						<div class="banner-head-title-wap ">用户服务</div>
						<div class="banner-head-text-wap">USER SERVICES</div>
					</div>
					<div class="banner-sel-wap" data-animation="bounceInLeft">
						<div class="pageContent sel-box">
							<div class="sel-item">
								<a href="">
									<div class="sel-item-text-wap active">
										临床支持
									</div>
								</a>
								<a href="/psk-web-html/service/AfterSales.html">
									<div class="sel-item-text-wap ">
										专业售后
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>


			<!-- 内容区 -->
			<div class="show-pc" >
				<div class="service-content-box">
					<el-carousel :interval="40000000" type="card" height="100%" :indicator-position="'none'"
						@change="carouselChange">
						<el-carousel-item :key="item">
							<img src="../public/img/临床支持.png" alt="" class="carousel-img" />
							<div class="carousel-text" data-animation="fadeInUp">
								从装机前的预培训，装机后的临床产品培训，到在线课程、线上指导服务，我们为客户提供及时有效的、贴合用户需求的、符合产品特
								点的、专业、高标准的系列培训。</div>
						</el-carousel-item>
						<el-carousel-item :key="item">
							<img src="../public/img/临床支持.png" alt="" class="carousel-img" />
							<div class="carousel-text" data-animation="fadeInUp">
								从装机前的预培训，装机后的临床产品培训，到在线课程、线上指导服务，我们为客户提供及时有效的、贴合用户需求的、符合产品特
								点的、专业、高标准的系列培训。</div>
						</el-carousel-item>
						<el-carousel-item :key="item">
							<img src="../public/img/临床支持.png" alt="" class="carousel-img" />
							<div class="carousel-text" data-animation="fadeInUp">
								从装机前的预培训，装机后的临床产品培训，到在线课程、线上指导服务，我们为客户提供及时有效的、贴合用户需求的、符合产品特
								点的、专业、高标准的系列培训。</div>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<div class="show-wap">
				<div class="service-content-box-wap">
					<el-carousel :interval="40000000"  height="100%" :indicator-position="'none'"
						@change="carouselChange">
						<el-carousel-item :key="item">
							<img src="../public/img/临床支持.png" alt="" class="carousel-img-wap" />
							<div class="carousel-text-wap" data-animation="fadeInUp">
								从装机前的预培训，装机后的临床产品培训，到在线课程、线上指导服务，我们为客户提供及时有效的、贴合用户需求的、符合产品特
								点的、专业、高标准的系列培训。</div>
						</el-carousel-item>
						<el-carousel-item :key="item">
							<img src="../public/img/临床支持.png" alt="" class="carousel-img-wap" />
							<div class="carousel-text-wap" data-animation="fadeInUp">
								从装机前的预培训，装机后的临床产品培训，到在线课程、线上指导服务，我们为客户提供及时有效的、贴合用户需求的、符合产品特
								点的、专业、高标准的系列培训。</div>
						</el-carousel-item>
						<el-carousel-item :key="item">
							<img src="../public/img/临床支持.png" alt="" class="carousel-img-wap" />
							<div class="carousel-text-wap" data-animation="fadeInUp">
								从装机前的预培训，装机后的临床产品培训，到在线课程、线上指导服务，我们为客户提供及时有效的、贴合用户需求的、符合产品特
								点的、专业、高标准的系列培训。</div>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>

	</body>
	<script type="text/javascript" src="../public/node_modules/vue/vue.js"></script>
	<script type="text/javascript" src="../public/node_modules/element/element.js"></script>
	<script type="text/javascript" src="../public/js/pubilc.js"></script>
	<script type="text/javascript" src="../public/js/pubilc-wap.js"></script>


	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					dialogTableVisible: false,


				}
			},
			mounted() {
				this.carouselChange(0)
			},
			methods: {
				carouselChange(e) {
					$('.carousel-text').hide()
					$('.carousel-text').eq(e).show()
				}
			}

		});
	</script>
</html>